<template>
  <div class="masterinstat">
    <div class="master">
      <div class="zwlb">
        <ul>
          <li>
            <div class="zwlbnr">
              <p class="zwlbbt">
                沟通职位：人事专员

              </p>
              <p class="masterzef">
                大专
                <span class="zwfg">|</span>
                1-3年
                <span class="zwfg">|</span>
                本科
                <span class="zwlbsj">3k-10k</span>
              </p>

            </div>
          </li>
        </ul>
      </div>
      <div class="masterallcount" id="dialogue_box">
        <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->

        <div v-for="(item,index) in list" :key="index+'master'">

          <div class="masterpaentright" v-if="item.senderUserId===masterform.senderUserId">
            <img class="masterimgright" src="@/assets/img/avatar.png" alt="">
            <div class="masterconetright">
              <span class="masterright">
                {{item.content}}
              </span>
              <div>
                <p class="yiduright" v-if="chatItem.msgStatus == 0">已读</p>
                <p class="yiduright" v-else>已发送</p>
              </div>

              <div class="mastericoright"></div>
            </div>
          </div>
          <div class="masterpaent" v-else>
            <img class="masterimg" src="@/assets/img/avatar.png" alt="">
            <div class="masterconet">
              <span class="masterleft">
                {{item.content}}
              </span>
              <div>
                <p class="yidu">已读</p>
                <!-- <p class="weidu" v-else>未读</p> -->
              </div>

              <div class="masterico"></div>
            </div>
          </div>
        </div>
        <!-- </van-pull-refresh> -->
      </div>
    </div>
    <div class="messagepart" :style="{bottom:messbottom}">

      <div class="zhssce">
        <div class="messabutt" @click="onincommonuse">
          <span>常用语</span>
        </div>
        <!-- <div contenteditable="true" class="maesstextarea"></div> -->
        <van-field v-model="content" rows="1" autosize type="textarea" />

        <div class="zhssceer" @click="sendMessage">
          <button :disabled="!content">发送</button>
        </div>
      </div>
    </div>
    <van-popup v-model="showincommonuse" position="bottom" @click-overlay="onClose">
      <div style="height:4rem;padding-top: 0.5rem;text-align: left; padding-left: 0.2rem;">
        <div v-for="(item,index) in incommonuselist" :key="index+'incommonuse'">
          <p :class="item.class">
            {{item.content}}
          </p>
          <a href="javascipt:;" v-if="item.show" @click="contentall(item)">展开</a>
        </div>

      </div>
      <!-- <van-picker show-toolbar value-key="name" :visible-item-count="5" :item-height="45"
                    :columns="incommonuselist"  /> -->
    </van-popup>
  </div>

</template>

<script>
import SEEALSO from '@/api/seealso'
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
export default {
  data () {
    return {
      message: '',
      list: [],
      isLoading: false,
      username: 1,
      receiver: 2,
      showincommonuse: false,
      incommonuselist: [],
      messbottom: 0,
      name: "王晓鑫",
      stompClient: '',
      id: '',
      chatId: '',
      content: '',//发送的信息
      masterform: {

      }

    }
  },
  methods: {
    onmessage () {

    },
    //获取聊天历史并建立连接
    chatListMessage () {
      let that = this
      if (that.stompClient) {
        // 如果切换 联系人 关闭上个联系人的长链接
        that.stompClient.disconnect(res => {
          console.log(res, '中断连接')
        })
      }
      let formData = new FormData()
      formData.append('chatId', that.chatId)
      // let params = {
      //   "jobId": 1,
      //   "resumeId": 2,
      //   "senderUserId": this.masterform.senderUserId,
      //   "receiverUserId": this.masterform.receiverUserId
      // };

      SEEALSO.chatListMessage(params).then(res => {
        console.log(res.data)
        let data = res.data.data
        if (res.data.code === 200) {
          // this.incommonuselist = res.data.data
          // this.connect(res.data.data)
          that.masterform = res.data.data
          //连接
          let socket = new SockJS(`${this.masterUrl}/socket`);

          that.stompClient = Stomp.over(socket);

          that.stompClient.connect({}, () => {
            // 订阅路径
            let url = ''
            if (newVal.senderUserId == localStorage.getItem('ps_userId')) {
              url = newVal.senderUrl
            } else {
              url = newVal.receiverUrl
            }
            that.stompClient.subscribe(data.senderUrl, (res) => {
              that.onMessageReceived(res)
            });
            that.stompClient.send("/apps/chat.addUser", {}, JSON.stringify({
              // 发送人
              senderUserId: data.senderUserId,
              // 接收人
              receiverUserId: data.receiverUserId,
              // 类型
              operationType: 1
            }))
          })
        } else {
          that.$notify(res.data.msg)
        }
      })
    },
    //常用语显示
    onincommonuse () {
      this.showincommonuse = true
      this.messbottom = '4rem'
    },
    onClose () {
      console.log(22)
      this.messbottom = '0'
    },

    // 链接失败
    onError (error) {
      console.log('失败')
    },
    // 发送
    sendMessage (event) {


      let chatMessage = {
        chatId: this.masterform.chatId,
        senderUserId: this.masterform.senderUserId,
        receiverUserId: this.masterform.receiverUserId,
        content: this.content,
        type: 'CHAT'
      };

      this.stompClient.send("/app/chat.sendMessage", {}, JSON.stringify(chatMessage));


    },
    // 显示
    onMessageReceived (payload) {
      console.log(1)

      console.log(payload, 'payload')

      var message = JSON.parse(payload.body);
      this.list.push(message)
      this.content = ''
      this.scrollToBottom()
      if (message.type === 'JOIN') {

      } else if (message.type === 'LEAVE') {

      } else {

      }


    },

    getAvatarColor (messageSender) {
      var hash = 0;
      for (var i = 0; i < messageSender.length; i++) {
        hash = 31 * hash + messageSender.charCodeAt(i);
      }

      var index = Math.abs(hash % colors.length);
      return colors[index];
    },
    scrollToBottom: function () {
      this.$nextTick(function () {
        var container = document.getElementById('dialogue_box')
        container.scrollTop = container.scrollHeight
      })
    },
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 1000)
    },
    //常用语获取
    personCommonWords () {
      SEEALSO.personCommonWords().then(res => {
        console.log(res.data)
        if (res.data.code === 200) {
          this.incommonuselist = res.data.data
          // this.incommonuselist[0].content = 'w我问问我我我我我二位我 位问问二位二位我位吾问无为谓吾问无为谓'
          // console.log(this.incommonuselist[0].content.length, 'ddd')
          this.incommonuselist.map(item => {
            item.class = 'clsincommonuse'
            if (item.content.length > 20) {
              item.show = true
            } else {
              item.show = false
            }
          })
        } else {
          this.$notify(res.data.msg)
        }
      })
    },
    //点击展开事件
    contentall (item) {
      console.log(2222)
      item.class = "clsincommonusepol"
      item.show = false
      this.$forceUpdate()
    }

  },
  created () {
    this.masterform.senderUserId = this.$route.query.wo
    this.masterform.receiverUserId = this.$route.query.ni
    this.scrollToBottom()

    // this.connect()
    // this.senderreceiver()
    this.personCommonWords()
  }
}
</script>

<style scoped>
.master {
  margin: 40px 0 40px 40px;
  /* padding-right: 40px; */
}
.masterpaent {
  position: relative;
  text-align: left;
}
.masterimg {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 100%;
}
.masterleft {
  display: inline-block;
  height: 80px;

  background: rgba(177, 222, 255, 1);
  border-radius: 8px;
  margin-left: 29px;
  line-height: 80px;
  padding: 0 32px;
}
.masterico {
  position: absolute;
  top: 0.4rem;
  left: 0.2rem;
  border-top: 8px solid transparent;
  border-right: 16px solid #b1defe;
  border-bottom: 8px solid transparent;
}
.masterconet {
  position: relative;
  margin-left: 1.2rem;
  margin-top: 0.5rem;
}
.masterpaentright {
  position: relative;
  text-align: right;
  margin-right: 40px;
}
.masterimgright {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 0;
  right: 0;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 100%;
}
.masterconetright {
  position: relative;
  margin-right: 1.2rem;
  margin-top: 0.5rem;
}
.masterright {
  display: inline-block;
  height: 80px;
  background: rgba(177, 222, 255, 1);
  border-radius: 8px;
  margin-right: 29px;
  line-height: 80px;
  padding: 0 32px;
}
.mastericoright {
  position: absolute;
  top: 0.4rem;
  right: 0.2rem;
  border-top: 8px solid transparent;
  border-left: 16px solid #b1defe;
  border-bottom: 8px solid transparent;
}
.messagepart {
  position: fixed;
  bottom: 0;
  height: 98px;
  width: 100%;
  line-height: 98px;
  background: rgba(24, 147, 252, 1);
  z-index: 3000;
  transition: all 0.4s;
}
.yidu {
  font-size: 20px;
  color: rgba(153, 153, 153, 1);
  margin-left: 30px;
}
.weidu {
  font-size: 20px;
  color: red;
  margin-right: 30px;
}
.yiduright {
  font-size: 20px;
  color: rgba(153, 153, 153, 1);
  margin-right: 30px;
}
.zhssce {
  padding-top: 0.2rem;
  position: relative;
}
.zhssce .zhssceer {
  /* width: 64px; */
  height: 45px;
  background: rgba(24, 147, 252, 1);
  opacity: 1;
  font-size: 32px;
  line-height: 60px;
  float: right;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin-right: 40px;
}
.messabutt {
  float: left;
  width: 102px;
  height: 64px;
  /* display: inline-block; */
  overflow: hidden;
  background: rgba(65, 168, 252, 1);
  border-radius: 8px;
  font-size: 24px;
  line-height: 64px;
  border: none;
  color: rgba(255, 255, 255, 1);
  /* margin-right: 20px; */
  margin-left: 30px;
}
.maesstextarea {
  width: 60%;
  display: inline-block;
  height: 64px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 8px;
  outline: 0px;
  padding-bottom: 20px;
  line-height: 64px;
  text-align: left;
  -webkit-user-select: text;
}
.maesstextarea p {
  text-align: left;
  /* height: 64px; */
  margin: 0;
  padding: 0;
}
.zwlbbt {
  font-size: 28px;

  font-weight: bold;

  color: rgba(34, 34, 34, 1);
  margin: 20px 20px 0 20px;
}
.zwlbsj {
  color: red;
}
.master .zwlb ul li {
  height: 182px;
  /* margin: 28px 0px; */
  margin: 28px 0 0 0;
}
.zwlb {
  margin-right: 40px;
}
.masterzef {
  margin: 60px 20px 0 20px;
}
.masterallcount {
  height: 12.5rem;
  overflow: scroll;
}
.clsincommonuse {
  /* height: 1rem; */
  /* line-height: 1rem;
  min-height: 1rem; */
  padding-top: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90%;
  display: inline-block;
}
.clsincommonusepol {
  padding-top: 0.5rem;
  width: 90%;
  display: inline-block;
}
.masterinstat /deep/ .van-overlay {
  background-color: rgba(0, 0, 0, 0.1);
}
.zhssceer button {
  background: rgba(65, 168, 252, 1);
  border: none;
}
</style>
